<!-- 编辑弹窗 -->
<template>
  <ele-modal
    :form="true"
    :destroy-on-close="true"
    width="750px"
    v-model="visible"
    :title="isUpdate ? '修改学生' : '添加学生'"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="80px"
      @submit.prevent=""
    >
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学号" prop="code">
            <el-input v-model="form.code" placeholder="请输入学号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <dict-data
              code="user_sex"
              v-model="form.sex"
              placeholder="请选择性别"
            />
            <!--            <el-select-->
            <!--              v-model="form.sex"-->
            <!--              clearable-->
            <!--              filterable-->
            <!--              style="margin-left: 0; width: 100%"-->
            <!--              placeholder="请选择性别"-->
            <!--            >-->
            <!--              <el-option-->
            <!--                v-for="item in sexOptions"-->
            <!--                :key="item.value"-->
            <!--                :label="item.label"-->
            <!--                :value="item.value"-->
            <!--              >-->
            <!--              </el-option>-->
            <!--            </el-select>-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="校区" prop="campus">
            <el-select
              v-model="form.campus"
              clearable
              filterable
              style="margin-left: 0; width: 100%"
              placeholder="请选择校区"
            >
              <el-option
                v-for="item in campusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="民族" prop="nation">
            <dict-data
              code="nation"
              v-model="form.nation"
              placeholder="请选择民族"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="政治面貌" prop="political">
            <el-select
              v-model="form.political"
              clearable
              filterable
              style="margin-left: 0px; width: 100%"
              placeholder="请选择政治面貌"
            >
              <el-option
                v-for="item in politicalOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="年级" prop="grade">
            <el-input v-model="form.grade" placeholder="请输入年级" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="系别" prop="department">
            <el-input v-model="form.department" placeholder="请输入系别" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="专业" prop="major">
            <el-input v-model="form.major" placeholder="请输入专业" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业方向" prop="majorDirection">
            <el-input
              v-model="form.majorDirection"
              placeholder="请输入专业方向"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="辅导员" prop="counsellorCode">
            <el-select
              v-model="form.counsellorCode"
              clearable
              filterable
              style="margin-left: 0px; width: 100%"
              placeholder="请选择辅导员"
            >
              <el-option
                v-for="item in userOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学制" prop="studyTime">
            <el-select
              v-model="form.studyTime"
              clearable
              filterable
              style="margin-left: 0px; width: 100%"
              placeholder="请选择学制"
            >
              <el-option
                v-for="item in studyTimeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="学籍状态" prop="studyState">
            <dict-data
              code="study_state"
              v-model="form.studyState"
              placeholder="请选择学籍状态"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="毕业年份" prop="graduationYear">
            <el-input
              v-model="form.graduationYear"
              placeholder="请输入毕业年份"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="总支" prop="organization">
            <dict-data
              code="organization"
              v-model="form.organization"
              placeholder="请选择所属党总支"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="困难类型" prop="difficulty">
            <dict-data
              code="difficulty"
              v-model="form.difficulty"
              placeholder="请选择困难类型"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, watch } from 'vue';
  import {
    getGraduationYear,
    getCampus,
    getStudyStatus,
    getDepartment,
    getMajor,
    getGrade,
    getSex,
    getPolitical,
    getStudyTime
  } from '@/api/manage/statistic/admin/studentInfo/index.js';
  import { EleMessage } from 'ele-admin-plus';
  import { useFormData } from '@/utils/use-form-data';
  import {
    addInfo,
    updateInfo
  } from '@/api/manage/statistic/admin/studentInfo';
  import { selectCurrentYear } from '@/api/manage/statistic/admin/schoolInfo/index.js';
  import { getUser } from '@/api/manage/statistic/admin/studentInfo/index.js';

  const props = defineProps({
    /** 修改回显的数据 */
    data: Object
  });

  const emit = defineEmits(['done']);

  /** 弹窗是否打开 */
  const visible = defineModel({ type: Boolean });

  /** 是否是修改 */
  const isUpdate = ref(false);

  /** 提交状态 */
  const loading = ref(false);

  /** 表单实例 */
  const formRef = ref(null);

  /** 表单数据 */
  const [form, resetFields, assignFields] = useFormData({
    id: void 0,
    name: '',
    code: '',
    sex: '',
    nation: '汉族',
    political: '',
    campus: '',
    grade: '',
    department: '',
    major: '',
    majorDirection: '',
    studyTime: '',
    studyState: '',
    counsellorCode: '',
    graduationYear: '',
    organization: '',
    difficulty: '非困难',
    updateBy: '',
    updateTime: '',
    remark: ''
  });

  /** 表单验证规则 */
  const rules = reactive({});

  /** 关闭弹窗 */
  const handleCancel = () => {
    visible.value = false;
  };

  /** 保存编辑 */
  const save = () => {
    formRef.value?.validate?.((valid) => {
      if (!valid) {
        return;
      }
      loading.value = true;
      const saveOrUpdate = isUpdate.value ? updateInfo : addInfo;
      saveOrUpdate(form)
        .then((msg) => {
          loading.value = false;
          EleMessage.success({ message: msg, plain: true });
          handleCancel();
          emit('done');
        })
        .catch((e) => {
          loading.value = false;
          EleMessage.error({ message: e.message, plain: true });
        });
    });
  };

  /**
   * 获取毕业年份列表
   * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
   */
  const graduationYearOptions = ref([]);
  const selectGraduationYear = () => {
    getGraduationYear().then((res) => {
      graduationYearOptions.value = res.data;
    });
  };

  ////////////////////////////////////////////////////////

  /**
   * 获取校区列表
   * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
   */
  const campusOptions = ref([]);
  const selectCampus = () => {
    getCampus().then((res) => {
      campusOptions.value = res.data;
    });
  };

  //获取当前毕业年份
  const currentYear = ref('');
  const getCurrentYear = () => {
    selectCurrentYear().then((res) => {
      currentYear.value = res;
      form.graduationYear = currentYear.value;
    });
  };

  /**
   * 获取学籍列表
   * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
   */
  const studyOptions = ref([]);
  const selectStudyStatus = () => {
    getStudyStatus().then((res) => {
      studyOptions.value = res.data;
    });
  };

  ////////////////////////////////////////////////////////

  const departmentOptions = ref([]);
  const selectDepartment = () => {
    getDepartment().then((res) => {
      departmentOptions.value = res.data;
    });
  };

  const majorOptions = ref([]);
  const selectMajor = () => {
    getMajor().then((res) => {
      majorOptions.value = res.data;
    });
  };

  const gradeOptions = ref([]);
  const selectGrade = () => {
    getGrade().then((res) => {
      gradeOptions.value = res.data;
    });
  };

  const userOptions = ref([]);
  const selectUser = () => {
    getUser().then((response) => {
      userOptions.value = response.data;
    });
  };

  const sexOptions = ref([]);
  const selectSex = () => {
    getSex().then((response) => {
      sexOptions.value = response.data;
    });
  };

  /**
   * 查询民族
   * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
   */
  // const nationOptions = ref([]);
  // const selectNation = () => {
  //   getNation().then(response => {
  //     nationOptions.value = response.data;
  //   });
  // }
  ////////////////////////////////////////////////////////

  /**
   * 政治面貌
   * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
   */
  const politicalOptions = ref([]);
  const selectPolitical = () => {
    getPolitical().then((response) => {
      politicalOptions.value = response.data;
    });
  };
  ////////////////////////////////////////////////////////

  /**
   * 学制
   * @type {Ref<UnwrapRef<*[]>, UnwrapRef<*[]> | *[]>}
   */
  const studyTimeOptions = ref([]);
  const selectStudyTime = () => {
    getStudyTime().then((response) => {
      studyTimeOptions.value = response.data;
    });
  };
  ////////////////////////////////////////////////////////

  /** 监听弹窗打开 */
  watch(visible, () => {
    console.log('打开');

    if (visible.value) {
      //打开
      selectCampus(); //查询校区
      selectGraduationYear(); //查询毕业年份
      selectStudyStatus(); //查询学籍列表
      selectDepartment(); //查询系别列表
      selectMajor(); //查询专业列表
      selectUser(); //查询用户列表
      selectGrade(); //查询年级
      //selectSex(); //查询性别
      selectPolitical(); //政治面貌
      selectStudyTime(); //学制
      //console.log(visible.value, props.data);
      if (props.data) {
        assignFields(props.data);
        isUpdate.value = true;
      } else {
        resetFields();
        //console.log('新增');
        getCurrentYear(); //获取当前毕业年份，只有在新增的时候才修改
        isUpdate.value = false;
      }
    }
  });
</script>
